<template>
	<view class="rootView">
		<view class="cp-header flex-between">
			<view class="tab flex-center-align" :class="{'active-tab':tabCurrent == index}" v-for="(item,index) in tabList"
				:key="index" @click="menuClick(item,index)">
				{{item.name}}
			</view>
		</view>
		<view class="cp-body">
			<view v-if="couponList.length>0" class="cp-item">
				<view class="cp-list" v-for="(item,index) in couponList" :key="index">
					<view class="flex-between align-center" v-if="item.status != 3">
						<view class="left flex-column cff4" :class="{'ffc':item.status==2}">
							<text class="fz36 bold" :class="{'fcl':item.status==2}">¥ {{item.voucher_reduce}}</text>
							<text style="font-weight: 700; margin-top: 20rpx;" class="fz32" :class="{'fcl':item.status==2}">企服代金券</text>
						</view>
						<view class="middle" :class="{'c999':item.status==2}">
							<view class="fz36" style="font-weight: 700;">{{item.voucher_name}}</view>
							<view class="time c-666" :class="{'cff4':item.isToday && item.status!=2}">
								{{item.endtime_text}} 到期
							</view>
							<view class="rules flex c999" :class="{'cccc':item.status==2}" @click="showRule(item)">
								使用规则<u-icon class="arrow" name="arrow-down" size="12"></u-icon>
							</view>
						</view>
						<image class="right-img" v-if="item.status==2"
							src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/yishiyong.png" mode="widthFix">
						</image>
						<view v-if="item.status == 1" class="right-use flex-center-align" @click="goUse(item)">去使用
						</view>
					</view>
					<!-- 过期 -->
					<view v-if="item.status == 3" style="color: #D1D1D1;" class="flex-between align-center">
						<view class="left flex-column">
							<text class="fz36 bold">¥ {{item.voucher_reduce}}</text>
							<text style="font-weight: 700; margin-top: 20rpx;" class="fz32">企服代金券</text>
						</view>
						<view class="middle">
							<view class="fz36" style="font-weight: 700;">{{item.voucher_name}}</view>
							<view class="time c-666">
								{{item.endtime_text}} 到期
							</view>
							<view class="rules flex" style="color: #D1D1D1;">
								使用规则<u-icon class="arrow" name="arrow-down" size="12"></u-icon>
							</view>
						</view>
						<image class="right-img"
							src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/yiguoqi.png" mode="widthFix">
						</image>
					</view>
				</view>
			</view>
			<view v-if="couponList.length === 0">
				<u-empty mode="data" text='暂无优惠券' icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
		</view>
		<u-popup class="showRules" :show="showRules" :round="15" :closeOnClickOverlay="true" mode="center"
			:customStyle="{width: '280px', minHeight: '500rpx',padding: '10px',textAlign:'center'}"
			@close="showRules = false">
			<view style="margin-bottom: 20px;" class="fz40">
				使用规则
			</view>
			<view class="rule-text">
				<rich-text :nodes="rule"></rich-text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import personalApi from "@/api/personal.js"
import moment from "moment"
	export default {
		data() {
			return {
				showRules: false, //规则弹窗
				rule: '', //规则
				tabCurrent: 0,
				status: '',
				tabList: [{
					id: 1,
					name: "默认",
				}, {
					id: 2,
					name: "已使用",
					status: 2,
				}, {
					id: 3,
					name: "已过期",
					status: 3
				}],
				couponList: [],
				timeEnd: false
			}
		},
		onLoad() {
			this.getCouponList()
		},
		methods: {
			menuClick(item, index) {
				this.tabCurrent = index
				if (index == 1) {
					this.status = 2
				} else if (index == 2) {
					this.status = 3
				} else {
					this.status = ''
				}
				this.getCouponList()
			},
			goUse() {
				uni.switchTab({
					url: "/pages/service/service"
				})
			},

			//获取优惠券列表
			async getCouponList() {
				let res = await personalApi.getCouponList({
					status: this.status
				})
				if (res.code == 1) {
					console.log(res);
					this.couponList = res.data
					for (let item of res.data) {
						let a = item.endtime * 1000 - new Date().getTime()
						let isToday = a > 0 && a < 24 * 3600 * 1000 //相差在0~一天内
						item.endtime_text = moment(item.endtime_text).format('YYYY-MM-DD')
						this.$set(item, 'isToday', isToday)
					}
				} else {
					this.$used.msg(res.msg)
				}
			},
			
			//展示代金券规则
			showRule(item) {
				this.showRules = true
				this.rule = item.voucher_rule
			}
		}
	}
</script>

<style lang="scss">
	@import url(@/common/css/reset.css);

	.rootView {
		height: 100%;
		overflow-y: auto;
		background: #F6F6F6;

		.cp-header {
			margin: 30rpx 0;
			padding: 0 20rpx;
			width: 100%;
			height: 62rpx;


			.tab {
				width: 216rpx;
				height: 62rpx;
				background: #E7E7E7;
				border-radius: 55rpx;
			}

			.active-tab {
				background: #FF6161;
				color: #F4F8FB;
			}
		}

		.cp-body {
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.cp-eleven-list {
				position: relative;
				padding: 40rpx;
				margin-top: 20rpx;
				width: 690rpx;
				height: 213rpx;
				background: #fff;
				border-radius: 22rpx;
				border: 2rpx solid #FF6161;
				.true-eleven {
					top: -1rpx;
					left: 0;
					position: absolute;
					width: 95rpx;
					height: 41rpx;
				}
				.price {
					font-size: 36rpx;
					font-weight: bold;
				}
				.old-price {
					margin-top: 10rpx;
					text-decoration: line-through;
					color: #999;
					font-size: 28rpx;
				}
				.right-use {
					width: 152rpx;
					height: 58rpx;
					background: #FF6161;
					border-radius: 55px;
					color: #F4F8FB;
				}
			
				.right-img {
					width: 110rpx;
					height: 110rpx;
			
				}
			
				.left {
					align-items: center;
				}
			
			
				.middle {
					.time {
						margin: 10rpx 0;
					}
			
					.arrow {
						margin-left: 20rpx;
					}
				}
			
			}
			.cp-list {
				padding: 40rpx;
				margin-top: 20rpx;
				width: 690rpx;
				height: 213rpx;
				background: #fff;
				border-radius: 22rpx;

				.right-use {
					width: 152rpx;
					height: 58rpx;
					background: #FF6161;
					border-radius: 55px;
					color: #F4F8FB;
				}

				.right-img {
					width: 110rpx;
					height: 110rpx;

				}

				.left {
					align-items: center;
				}


				.middle {
					.time {
						margin: 10rpx 0;
					}

					.arrow {
						margin-left: 20rpx;
					}
				}

			}
		}
	}

	.rule-text>rich-text {
		color: #666;
	}

	/deep/ .u-icon--right {
		margin-top: 10rpx;
		margin-left: 10rpx;
	}


	// .showRules{
	// 	padding: 60rpx !important;
	// }
</style>